<template>
  <div class="box">
    <!-- 左盒子 -->
    <div class="chart-container">
      <div class="echart" id="mychart" :style="myChartStyle"></div>
    </div>
    <!-- 右盒子 -->
    <div class="right-box" style="width:320;float: left;margin-top:110px;">
      <el-table :data="tableData" :row-style="{height: '40px'}" height="400" border style="width:100%">
        <el-table-column prop="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="type" label="垃圾种类" width="100"> </el-table-column>
        <el-table-column prop="number" label="数量" width="50"></el-table-column>
        <el-table-column prop="success" label="成功与否" width="100"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "message",
  data() {
    return {
      myChart: {},
      myChartStyle: { float: "left", width: "100%", height: "500px" }, //图表样式
      type: [], //图表data容器
      timer: null,
      timer10: null,
      timer11: null,
      timer12: null,
      timer13: null,
      timer2: null,
      timer3:null,
      res1: "",
      res2: [0],
      // 表格数据
      tableData: [
        {
          index: "1",
          type: "",
          number: "",
          success: "",
        },
        {
          index: "2",
          type: "",
          number: "",
          success: "",
        },
        {
          index: "3",
          type: "",
          number: "",
          success: "",
        },
        
        {
          index: "4",
          type: "",
          number: "",
          success: "",
        },
        {
          index: "5",
          type: "",
          number: "",
          success: "",
        },
        {
          index: "6",
          type: "",
          number: "",
          success: "",
        },
        {
          index: "7",
          type: "",
          number: "",
          success: "",
        },
        {
          index: "8",
          type: "",
          number: "",
          success: "",
        },
                {
          index: "9",
          type: "",
          number: "",
          success: "",
        },
                {
          index: "10",
          type: "",
          number: "",
          success: "",
        },

      ],
    };
  },
  created() {
    // 垃圾投放信息
    this.timer = null;
    // 四个桶满载检测情况
    this.timer10 = null;
    this.timer11 = null;
    this.timer12 = null;
    this.timer13 = null;
    // 垃圾桶中垃圾信息（图表）
    this.timer2 = null;
    // TableMessage信息
    this.timer3 = null;
    this.setTimer();
  },
  mounted() {
    this.initEcharts();
    this.mqttMsg();
  },
  methods: {
    rowClassName(row, index) {
      return 'custom-row'; // 自定义行的类名
    },
    open(res) {
      this.$notify({
        title: "投放信息",
        message: res,
        offset: 100,
      });
    },
    // 弹窗
    open1(res) {
      this.$notify({
        title: "装载情况",
        message: res,
        offset: 100,
        duration: 0,
      });
    },
    // 定时器
    setTimer() {
      // 初始投放垃圾信息
      this.timer = setInterval(this.valChange, 5000); // 注意: 第一个参数为方法名的时候不要加括号;
      // 满载情况
      this.timer10 = setInterval(this.valChange10, 5000);
      this.timer11 = setInterval(this.valChange11, 5000);
      this.timer12 = setInterval(this.valChange12, 5000);
      this.timer13 = setInterval(this.valChange13, 5000);
      // 垃圾桶垃圾数量（echarts）
      this.timer2 = setInterval(this.valChange2, 5000);
      // table
      this.timer3 = setInterval(this.valChangeTable, 5000);

    },
    // 垃圾投放信息
    valChange() {
      this.$axios.get("http://localhost:1234/GrabageType").then((res) => {
        if (this.res1 != res.data) {
          if(res.data!="Already Read!!")
            this.open("垃圾信息：" + res.data);
          this.res1 = res.data;
        }
      });
    },
    // 满载检测  定义编号[0，1，2，3]
    valChange10() {
      this.$axios.get("http://localhost:1234/GrabageType10").then((res) => {
        if (res.data[1] == "1") {
          this.open1("可回收垃圾满载");
          clearInterval(this.timer10);
        }
      });
      

    },
    valChange11() {
      this.$axios.get("http://localhost:1234/GrabageType11").then((res) => {
        if (res.data[1] == "1") {
          this.open1("有害垃圾满载");
          clearInterval(this.timer11);
        }
      });
    },
    valChange12() {
      this.$axios.get("http://localhost:1234/GrabageType12").then((res) => {
        if (res.data[1] == "1") {
          this.open1("厨余垃圾满载");
          clearInterval(this.timer12);
        }
      });
    },
    valChange13() {
      this.$axios.get("http://localhost:1234/GrabageType13").then((res) => {
        if (res.data[1] == "1") {
          this.open1("其他垃圾满载");
          clearInterval(this.timer13);
        }
      });
    },
    // 垃圾桶垃圾数量 & 调用initEcharts()
    valChange2() {
      this.$axios.get("http://localhost:1234/GrabageType2").then((res) => {
        this.type = res.data;
        this.initEcharts();
      });
    },
    // TableMessage信息
    valChangeTable(){
      this.$axios.get("http://localhost:1234/TableMessage").then((res) => {
        this.tableData = res.data;
      });
    },
    // 2、echarts图表内容区域
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: ["可回收垃圾", "有害垃圾", "厨余垃圾", "其他垃圾"],
          axisLabel: {
            fontSize: 24,
          },
        },
        grid: {
          left: "0%",
          right: "1%",
          bottom: "0%",
          containLabel: true,
          // top:"10%",
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [
              {
                value: this.type[0],
                // 设置单个柱子的样式
                itemStyle: {
                  color: "#FA8072",
                  shadowColor: "#91cc75",
                  borderType: "dashed",
                  opacity: 0.82,
                },
              },
              {
                value: this.type[1],
              },
              {
                value: this.type[2],
                // 设置单个柱子的样式
                itemStyle: {
                  color: "#91cc75",
                  shadowColor: "#91cc75",
                  borderType: "dashed",
                  opacity: 0.88,
                },
              },
              {
                value: this.type[3],
                // 设置单个柱子的样式
                itemStyle: {
                  color: "#F18860",
                  shadowColor: "#91cc75",
                  borderType: "dashed",
                  opacity: 0.68,
                },
              },
            ],
            barWidth: "40%", // 每个柱条的宽度就是类目宽度的 20%
            // 同系列柱条样式
            itemStyle: {
              barBorderRadius: 5,
              borderWidth: 1,
              borderType: "solid",
              borderColor: "#73c0de",
              shadowColor: "#5470c6",
              shadowBlur: 3,
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="css">
.chart-container {
  /* margin-right: 20%; */
  width: 53%;
  margin-top: 20px;
}
.box {
  display: flex;
  /* justify-content: space-between; */
}

.right-box .el-table__row{
    height: 5px !important;
}
</style>